// import { Menu, Layout } from 'antd';
import React, { useEffect } from 'react';
import "../../../scss/lk/OrderForm.scss"

//*请求
import { allindent_mohu, allindent_list, allindent_remove, allindent_fen } from "../../../tools/api"

//*插件
import { Input, Select, Button, Form, Space, Table, Modal } from 'antd';


//*图标
import { SearchOutlined } from "@ant-design/icons"


import { useState } from 'react';

import { message } from "antd";



function OrderForm(props) {


    //*结构form
    var { useForm } = Form
    var [form] = useForm()
    //*定义数据
    const [data, setData] = useState([])
    const [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 0 })
    const [loading, setLoading] = useState(false)

    const columns = [
        {
            title: '订单编号',
            dataIndex: 'dingdanbianhao',
            key: 'age',
        },
        {
            title: '提交时间',
            dataIndex: 'tijiaoatime',
            key: 'address',
        },
        {
            title: '用户账号',
            dataIndex: 'username',
            key: 'address',
        },
        {
            title: '货物状态',
            dataIndex: 'zhuangtai',
            key: 'address',
        },
        {
            title: '订单金额',
            dataIndex: 'dingdanmoney',
            key: 'address',
        },
        {
            title: '支付方式',
            dataIndex: 'zhifufangshi',
            key: 'address',
        },
        {
            title: '订单来源',
            dataIndex: 'userphone',
            key: 'address',
        },
        {
            title: '订单状态',
            dataIndex: 'dingdanzhuangtai',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <span onClick={() => { see(record) }}>查看</span>
                    <span onClick={() => { remove(record) }}>关闭</span>
                </Space>
            ),
        },
    ];

    //*生命周期
    useEffect(() => {
        allindent_list().then((ok) => {
            // console.log(pagination);
            console.log(ok);
            setData(ok.data)
            setPagination({ current: 1, pageSize: 5, total: ok.data.lenght })
        })
    }, [])

    //*搜索
    const onFinish = (value) => {
        console.log(value);
        allindent_mohu(value).then((res) => {
            console.log(res);
            setData(res.data)
        })
    };

    //*数据列表
    var list = () => {
        allindent_list().then((ok) => {
            setData(ok.data)
        })
    }

    //*删除
    var remove = (record) => {
        allindent_remove(record.id).then((ok) => {
            console.log(ok.data);
            list()
            message.open({ type: 'success', content: '删除成功' });
        })
        console.log(record);
    }
    //*分页触发的事件
    var onchenge = (pagination) => {
        setLoading(true)
        setPagination(pagination)
        setTimeout(() => {
            allindent_fen(pagination).then((ok) => {
                console.log(ok.data);
                setData(ok.data)
                setLoading(false)
            })
        }, 500);
    }


    //*弹框显示
    var see = (react) => {
        setIsModalOpen(true)
        console.log(react);
        // form.getFieldsValue(true)
        form.setFieldsValue(react)
    }


    const [isModalOpen, setIsModalOpen] = useState(false);
    const handleOk = () => {
        setIsModalOpen(false);
    };




    return (
        <div className='orderform'>
            <div className="orderform_top">
                数据报表 / 订单报表
            </div>
            <div className="orderform_name">
                全部订单
            </div>
            <div className="allindent_top">
                <div className="top_name">筛选查询</div>
                <div className='top_center'>
                    <Form
                        onFinish={onFinish}
                        className="search"
                    >
                        <Form.Item label="用户账号" className="formItem" name='username'>
                            <Input placeholder="请输入用户账号" />
                        </Form.Item>
                        <Form.Item className="formItem" >
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="form">
                    <div className="form_top">
                        <div className="from_name">
                            数据列表
                        </div>
                        <div className="from_btns">
                            <Button style={{ width: 150, height: 40, fontSize: 18, backgroundColor: "#009688", color: "white" }}>合并订单</Button>
                            <Button style={{ width: 150, height: 40, fontSize: 18, backgroundColor: "#009688", color: "white" }}>打印发货单</Button>
                            <Button style={{ width: 150, height: 40, fontSize: 18, backgroundColor: "#009688", color: "white" }}>批量发货</Button>
                            <Button style={{ width: 150, height: 40, fontSize: 18, backgroundColor: "#009688", color: "white" }}>导出订单</Button>
                        </div>
                    </div>
                    <div className="form_center">
                        <Table columns={columns} dataSource={data} onChange={onchenge} pagination={pagination} loading={loading} />
                    </div>
                    <div className="see">
                        <Modal title="查看订单" open={isModalOpen}
                            footer={[
                                <Button key="button1" onClick={handleOk}>取消 </Button>,
                            ]}
                        >
                            <Form
                                name="basic"
                                labelCol={{
                                    span: 8,
                                }}
                                wrapperCol={{
                                    span: 16,
                                }}
                                // onFinish={11}
                                form={form}
                            >
                                <Form.Item
                                    label="订单编号"
                                    name="dingdanbianhao"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="提交时间"
                                    name="tijiaoatime"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="用户账号"
                                    name="username"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="货物状态"
                                    name="zhuangtai"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="订单金额"
                                    name="dingdanmoney"
                                    rules={[
                                        {
                                            required: true,
                                            message: '订单金额不能为空',
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="支付方式"
                                    name="zhifufangshi"
                                    rules={[
                                        {
                                            required: true,
                                            message: '订单金额不能为空',
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="订单来源"
                                    name="userphone"
                                    rules={[
                                        {
                                            required: true,
                                            message: '订单来源不能为空',
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item
                                    label="订单状态"
                                    name="dingdanzhuangtai"
                                    rules={[
                                        {
                                            required: true,
                                            message: '订单状态不能为空',
                                        },
                                    ]}
                                >
                                    <Input disabled={true} />
                                </Form.Item>


                            </Form>
                        </Modal>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default OrderForm;